<script setup>
import { useRouter } from 'vue-router'
import { orderListAll } from '@/api/order.js'
import { ref,onMounted } from 'vue'
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter()
 const name = ref('')
onMounted(()=>{
    name.value = window.localStorage.getItem("name")
//   console.log( name.value); 
})
let orderList = ref([])
let pr = () => {
    // console.log('点击二维码')
    router.push('/grid4')

}
//点击进入口袋
let toPackage = ()=>{
    router.push('/package')
}

//点击个人信息
const singal = () => {
    console.log('跳转个人信息页');
    router.push('/self')

}
//所有订单
let toOrder = () => {
    console.log('跳转所有订单页');
    router.push('/alllist')
}


orderListAll().then(res => {
    // console.log(res.data);
    orderList.value = res.data.data
    // orderList.value.id = res.data.data.id
})

//美食订单页跳转
let toPage =value =>{
    console.log(value);
    if(value.id===0){
        router.push('/food')
    }
    else if(value.id === 1){
        router.push('/play')
    }else if(value.id === 2){
        router.push('/buy')
    }else if(value.id === 3){
        router.push('/sever')
    }
}
</script>

<template>
    <div class="box">
        <van-nav-bar left-text="个人中心" color="white">
            <template #right>
                <van-icon name="qr" size="20" color="white" @click="pr" />
            </template>
        </van-nav-bar>
        <div class="white">
            <div class="imgbox">
                <img src="https://img2.baidu.com/it/u=1333237491,1795884643&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1686762000&t=325a08d4580fbc8649dd87dc200b5f4c"
                    alt="">
            </div>

            <div class="name">
                <span><b>{{name}}</b></span>
                <van-tag round type="primary">至臻</van-tag>
            </div>
            <div class="singal">
                <span @click="singal">个人信息 &gt</span>
            </div>
        </div>
        <div class="package">
            <div>
                <p><b>16800</b></p>
                <em>主题币</em>
            </div>
            <div>
                <p><b>10000</b></p>
                <em>主题币</em>
            </div>
            <div>
                <p><b>4796</b></p>
                <em>咖积分</em>
            </div>
            <div class="last" @click="toPackage">
                <van-icon name="bag-o" />
                <p>进入口袋</p>
            </div>
        </div>
        <!-- 我的订单 -->
        <div class="order" @click="toOrder">
            <b>我的订单</b>
            <span>所有订单 ></span>
        </div>
        <van-grid :column-num="4">
            <van-grid-item v-for="value in orderList" :key="value.id" @click="toPage(value)" :icon="value.img" :text="value.text" />
        </van-grid>
        <!-- 服务权益 -->
        <h4>服务权益</h4>
        <p class="service" @click="$router.push('/confirm')">
            <span ><van-icon name="clock-o" color="green" /> 我的预约</span>
            <span><span class="round">{{ 1 }}</span> ></span>
        </p>
        <p class="service" @click="showFailToast('抱歉功能暂未开放')">
            <span><van-icon name="diamond-o" color="orange" /> 会员等级</span>
            <span><span>等级特权{{ 6 }}项</span> ></span>
        </p>
        <!-- 其他 -->
        <h4>其他</h4>
        <p class="service" @click="showFailToast('抱歉功能暂未开放')">
            <span><van-icon name="discount" color="blue" /> 设置中心</span>
            <span> ></span>
        </p>
        <p class="service last1" @click="showFailToast('抱歉功能暂未开放')">
            <span><van-icon name="chat-o" color="green" /> 主题问卷</span>
            <span><span class="dot"></span><span>限时</span> ></span>
        </p>
    </div>
</template>


<style lang="scss" scoped>
.box {

    .van-nav-bar {
        color: white;
        background-color: rgb(61, 106, 201);
        margin-bottom: 10px;

        .van-nav-bar__text {
            color: #f8f8f8;
        }
    }

    .white {
        height: 57px;
        display: flex;
        justify-content: space-around;
        padding: 0 .1rem .2rem;
        border-bottom: 1px solid rgb(219, 213, 213);

        .imgbox {
            border-radius: 50%;
            overflow: hidden;

            img {
                height: 58px;
            }

        }

        .name {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .van-tag {
                margin-top: 10px;
            }
        }

        .singal {
            line-height: 58px;
        }
    }

    .package {
        color: rgb(61, 106, 201);
        padding: .2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;

        div {
            border-right: 1px solid rgb(219, 213, 213);
            padding-right: 20px;
            text-align: center;
        }

        em {
            color: rgb(122, 116, 116)
        }

        .last {
            border: 0;
        }
    }

    .order {
        height: 48px;
        padding: .1rem .2rem;
        border-top: .1rem solid rgb(243, 240, 240);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    h4 {
        height: 40px;
        padding: .1rem .2rem;

    }

    .service {
        height: 30px;
        line-height: 30px;
        padding: 0 .2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border-bottom: 1px solid rgb(219, 213, 213);

        .round {
            display: block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            position: relative;
            top: 10px;
            left: 5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            float: left;
            margin-right: .1rem;
        }

        .dot {
            display: block;
            position: relative;
            top: 20px;
            left: -20px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            background-color: red;
            border-radius: 50%;
        }

    }

    .last1 {
        padding-bottom: 2rem;
    }

}
</style>